import React, { Component } from 'react';
import BasePage from "@/components/Layout/BasePage";

import { getOneLaporanPublic } from '../../../actions/public';
import { getAutoSave } from "@/actions/autosave";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Card, CardBody, Button, Modal, ModalBody, ModalFooter, FormGroup, Input, Navbar, NavItem, NavLink, NavbarBrand } from "reactstrap";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import SignatureCanvas from 'react-signature-canvas'
import { addPesertaPleno } from '../../../actions/public';
import { toast } from "react-toastify";
import Router from "next/router";
import swal from "sweetalert2";
import Link from 'next/dist/client/link';
import moment from 'moment';





class PlenoSanksi extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataLaporan: {},
            modal: false,
            signature: "",
            nama: "",
            data: {},
            changesign: false,
            pageDone: false,

        }
    }
    static getInitialProps = async ({ query }) => {
        return { query };

    };

    componentDidMount = async () => {
        const { query } = this.props;
        const { id } = query;
        const dataLaporan = await getOneLaporanPublic(id);
        const getDataSave = await getAutoSave({ id, laporan: true });
        const dataSuratBA = getDataSave.data?.PenetapanSanksi?.dataSuratBA;
        const dataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran?.data;
        this.setState({ dataLaporan, dataSuratBA, dataPelanggaran });
    };

    toggleModal = (value = true) => {
        if (!value) {
            this.setState({ modal: false });
        } else {
            this.setState({ modal: !this.state.modal });
        }
    };
    sigPad = []
    clear = () => {
        this.sigPad.clear()
    }
    updateValueSignature = () => {
        const addsig = this.sigPad.getTrimmedCanvas().toDataURL('image/png')
        this.setState({
            signature: addsig,
            changesign: true

        })
    }

    updateValueNama = (e) => {
        this.setState({ nama: e.target.value });
    }


    onSubmit = async (e) => {

        const { query, token } = this.props;
        const { id } = query;
        const sign = this.state.signature
        const blob = await (await fetch(sign)).blob();
        const files = new File([blob], new Date().valueOf() + 'image.png', { type: blob.type })
        const formdata = new FormData();
        formdata.append("ttd", files);
        formdata.append("laporan_id", id);
        formdata.append("nama", this.state.nama);
        const added = await addPesertaPleno(token, formdata);
        const toastid = toast.loading("Please wait...");
        if (!added) {
            swal.fire({
                title: "Gagal Input Tanda Tangan",
                icon: "error",
                confirmButtonColor: "#3e3a8e",
            });

        } else {
            swal.fire({
                title: "Berhasil Input Tanda Tangan",
                icon: "success",
                confirmButtonColor: "#3e3a8e",
            });
            Router.push(`/signature/pleno-sanksi/done/${id}`);
        }
    };




    render() {
        const { dataPelanggaran, dataLaporan, dataSuratBA, signature, nama, changesign } = this.state

        return (
            <ContentWrapper unwrap>
                <Modal isOpen={this.state.modal} >

                    <ModalBody>
                        <FormGroup row>
                            <label className="col-md-2 col-form-label">Nama:<span className=' text-danger'>*</span></label>
                            <div className="col-md-10">
                                <Input type="text" value={this.state.nama} onChange={(e) => { this.updateValueNama(e) }} />
                            </div>
                        </FormGroup>
                        <FormGroup row>
                            <label className="col-md-2 col-form-label">Tanda Tangan:</label>
                            <div className="col-md-10">
                                <SignatureCanvas penColor='black' canvasProps={{ className: 'sigCanvas signature-style' }} ref={(ref) => { this.sigPad = ref }} onEnd={(e) => this.setState({ changesign: false })} />
                            </div>
                        </FormGroup>
                        <ModalFooter>
                            <Button color className="btn-login" onClick={this.updateValueSignature
                            }>
                                <span className="font-color-white">Simpan</span>
                            </Button>
                            <Button color className="btn-v2" onClick={() => { this.clear(), this.updateValueSignature() }}>
                                Hapus
                            </Button>
                        </ModalFooter>
                        <ModalFooter>
                            <Button color className="bg-danger" onClick={this.toggleModal}>
                                Batal
                            </Button>
                            <Button color disabled={signature === "" || signature === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC" || nama === "" || changesign === false} className=" color-3e3a8e" onClick={this.onSubmit}>
                                <span className="font-color-white ">Kirim</span>
                            </Button>

                        </ModalFooter>

                    </ModalBody>
                </Modal>

                <div className='page-sign'>
                    <div className='BA-Header'>
                        <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
                        <h4 >LAPORAN HASIL RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT</h4>
                        {dataLaporan.data && (<h4 className='text-uppercase' >{dataLaporan.data.pt.nama}</h4>)}
                    </div>
                    <div className='BA-body px-5 pt-3'>
                        <p>
                            Pada hari ini
                            {dataSuratBA?.setTanggal === true ?
                                <span > {moment(dataSuratBA.tanggal).locale("id").format("dddd")}, tanggal&nbsp;{moment(dataSuratBA.tanggal).format("D")}&nbsp;bulan&nbsp;{moment(dataSuratBA.tanggal).locale("id").format("MMMM")} tahun &nbsp;{moment(dataSuratBA.tanggal).format("YYYY")},</span> :
                                <span> &nbsp;......... &nbsp;</span>
                            }
                            &nbsp;bertempat di
                            &nbsp;bertempat di
                            {dataSuratBA?.tempat === "[Mohon Diisi]" ?
                                <span>Belum Diisi Oleh Dikti</span>
                                :
                                <span>
                                    &nbsp;{dataSuratBA?.tempat}
                                </span>
                            }
                            ,
                            telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, yang dihadiri oleh:

                            <ol>
                                {dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => <li>{value.nama}</li>)}
                            </ol>
                        </p>
                        <p>
                            Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, disampaikan sebagai berikut:

                            <ol className='mt-3'>
                                <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi {dataLaporan.data && (<span>{dataLaporan.data.pt.nama}</span>)}, tanggal
                                    {dataSuratBA?.setTanggal_2 === true ? (

                                        dataSuratBA?.setTanggal_2 === true ?
                                            <span > {moment(dataSuratBA.tanggal_2).format("D")}&nbsp;bulan&nbsp;{moment(dataSuratBA.tanggal_2).format("MMMM")} tahun &nbsp;{moment(dataSuratBA.tanggal_2).format("YYYY")},</span> :
                                            <span> &nbsp;- &nbsp;</span>
                                    )
                                        : (
                                            dataSuratBA?.setTanggal === true ?
                                                <span> &nbsp;{moment(dataSuratBA?.tanggal).format("DD-MM-YYYY")}</span>
                                                :
                                                <span> &nbsp;....... &nbsp;</span>
                                        )
                                    }

                                </li>
                                <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
                            </ol>
                        </p>
                        <div className='table-a my-4' >
                            <table>
                                <thead >
                                    <tr>
                                        <th rowspan="2">NO</th>
                                        <th rowspan="2">NAMA DAN IZIN PRODI</th>
                                        <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
                                        <th rowspan="2">SIMPULAN</th>
                                        <th rowspan="2">REKOMENDASI</th>
                                    </tr>
                                    <tr>
                                        <th>PASAL</th>
                                        <th>BUTIR PELANGGARAN</th>
                                        <th>DESKRIPSI PELANGGARAN</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {dataLaporan.data?.sanksi?.pelanggaran ?
                                        (
                                            dataLaporan.data?.sanksi.pelanggaran.map((e, i) => (
                                                <tr key={e._id}>
                                                    <td>{++i}</td>
                                                    {dataLaporan.data && (<td >{dataLaporan.data.pt.nama}</td>)}
                                                    <td>{e.pasal}</td>
                                                    <td>{e.butir_pelanggaran}</td>
                                                    <td>{e.pelanggaran}</td>
                                                    <td >{dataSuratBA?.descPelanggaran[e._id]?.simpulan || ""}</td>
                                                    <td style={{ maxWidth: "80px" }}>
                                                        {`Sanksi Administratif berupa ${dataSuratBA?.sanksi || this.state.sanksi || "Belum diisi"}`}
                                                    </td>
                                                </tr>
                                            ))
                                        ) :
                                        (
                                            dataPelanggaran?.map((e, i) => (
                                                <tr key={e._id}>
                                                    <td>{++i}</td>
                                                    {dataLaporan.data && (<td >{dataLaporan.data.pt.nama}</td>)}
                                                    <td>{e.pasal}</td>
                                                    <td>{e.butir_pelanggaran}</td>
                                                    <td>{e.pelanggaran}</td>
                                                    <td >{dataSuratBA?.descPelanggaran[e._id]?.simpulan || ""}</td>
                                                    <td style={{ maxWidth: "80px" }}>
                                                        {`Sanksi Administratif berupa ${dataSuratBA?.sanksi || this.state.sanksi || "Belum diisi"}`}
                                                    </td>
                                                </tr>
                                            ))
                                        )}


                                </tbody>
                            </table>
                        </div>
                        <p>
                            <ol start="3">
                                <li>Temuan Lain:

                                    <ol type="a">
                                        {dataSuratBA?.temuanLain ?
                                            <span>{dataSuratBA.temuanLain.map((value) => <li>{value}</li>)}</span>
                                            : "Belum Diisi"}
                                    </ol>
                                </li>
                                <li>Hal-hal yang memberatkan, sebagai berikut:
                                    <ol type="a">
                                        {dataSuratBA?.memberatkan ?
                                            <span>{dataSuratBA.memberatkan.map((value) => <li>{value}</li>)}</span>
                                            : "Belum Diisi"}
                                    </ol>
                                </li>
                                <li>hal-hal yang meringankan, sebagai berikut:
                                    <ol type="a">
                                        {dataSuratBA?.meringankan ?
                                            <span>{dataSuratBA.meringankan.map((value) => <li>{value}</li>)}</span>
                                            : "Belum Diisi"}
                                    </ol>
                                </li>
                                <li>
                                    Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong >“Sanksi Administratif berupa&nbsp;
                                        {dataSuratBA?.sanksi === "[Mohon Diisi]" ?
                                            "-"
                                            : <span>{dataSuratBA?.sanksi}</span>}
                                        ”.</strong>
                                </li>
                            </ol>
                        </p>
                        <p >
                            Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
                        </p>
                        <p><strong>Note: Jika Anda menyetujui LAPORAN HASIL RAPAT PLENO PEMBAHASAN BERITA ACARA EKPT tersebut, maka klik tombol dibawah ini untuk melakukan tanda tangan sebagai bukti telah menyetujui.</strong> </p>
                        <Button color="" className="btn-labeled-2" onClick={this.toggleModal}>
                            <h4 className="mt-2 mb-md-2 text-center font-color-white pl-3 pr-3">Setuju</h4>
                        </Button>
                    </div>
                </div>


            </ContentWrapper>
        );
    }

}

PlenoSanksi.Layout = BasePage;
export default PlenoSanksi;